<template>
  <span :class="className" :style="{ color }">
    <slot>
      {{ value }}
    </slot>
  </span>
</template>
<script setup>
const props = defineProps({
  color: String,
  type: { type: String, default: 'default' },
  value: String | Number,
})

const className = computed(() => {
  return {
    text: true,
    [`text--${props.type}`]: props.type ? true : false,
  }
})
</script>
<style lang="scss" scoped>
.text--primary {
  color: var(--primary);
}

.text--red,
.text--fail {
  color: #ff4d4f;
}

.text--green,
.text--success {
  color: var(--green);
}

.text--light-blue {
  color: #07a7f0;
}
</style>
